import md5 from 'js-md5'
import { useState } from 'react'
import { Button, Form, Input, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { Login } from '@/apis/interface'
import { loginApi } from '@/apis/modules/login'
import { HOME_URL } from '@/config/config'
import { connect } from 'react-redux'
import { setToken, setTabsList, setUserInfo } from '@/store/app'
import { useTranslation } from 'react-i18next'
import { UserOutlined, LockOutlined, CloseCircleOutlined } from '@ant-design/icons'

const LoginForm = (props: any) => {
  const { t } = useTranslation()
  const { setToken, setTabsList } = props
  const navigate = useNavigate()
  const [form] = Form.useForm()
  const [loading, setLoading] = useState<boolean>(false)

  // 登录
  const onFinish = async (loginForm: Login.ReqLoginForm) => {
    try {
      setLoading(true)
      loginForm.password = md5(loginForm.password)
      const { data } = await loginApi(loginForm)
      setToken(data?.access_token)
      setUserInfo({ name: 'shawn' })
      setTabsList([])
      message.success('登录成功！')
      navigate(HOME_URL)
    } finally {
      setLoading(false)
    }
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }

  return (
    <Form
      form={form}
      name="basic"
      labelCol={{ span: 5 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      size="large"
      autoComplete="off">
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input placeholder="用户名：admin / user" prefix={<UserOutlined />} />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
        <Input.Password autoComplete="new-password" placeholder="密码：123456" prefix={<LockOutlined />} />
      </Form.Item>
      <Form.Item className="login-btn">
        <Button
          onClick={() => {
            form.resetFields()
          }}
          icon={<CloseCircleOutlined />}>
          {t('login.reset')}
        </Button>
        <Button type="primary" htmlType="submit" loading={loading} icon={<UserOutlined />}>
          {t('login.confirm')}
        </Button>
      </Form.Item>
    </Form>
  )
}

const mapDispatchToProps = { setToken, setTabsList, setUserInfo }
export default connect(null, mapDispatchToProps)(LoginForm)
